<template>
	<div>
	
	<el-row>
			<el-col :span="1">
				<p class="labelText">SA：</p>
			</el-col>
			<el-col :span="3" style="">
				<el-select v-model="queryData.SA" placeholder="请选择SA" clearable>
			    <el-option
			      v-for="item in SAList"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">抱怨程度：</p>
			</el-col>
			<el-col :span="3" style="padding-left: 10px;">
				<el-select v-model="queryData.questionDegree" placeholder="请选择" clearable>
			    <el-option
			      v-for="item in questionDegreeList"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">抱怨类型：</p>
			</el-col>
			<el-col :span="3" style="padding-left: 10px;">
				<el-select v-model="queryData.questionType" placeholder="请选择" clearable>
			    <el-option
			      v-for="item in questionTypeList"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">处理进度：</p>
			</el-col>
			<el-col :span="3" style="padding-left: 10px;" >
				<el-select v-model="queryData.progress" placeholder="请选择" clearable>
			    <el-option
			      v-for="item in progressList"	
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
			</el-col>
		
		<!--</el-row>
		<el-row>-->
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="query">查 询</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="submitNodeShow" v-if="currentRole != 'KF'">提 交</el-button>
			</el-col>
			<el-col :span="1" style="margin-left: 10px;">
				<el-button size="small" type="primary" @click="submitStatusShow" v-if="currentRole == 'KFMANAGERID'">完 成</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="typeEditShow" v-if="currentRole == 'KFMANAGERID'">类型调整</el-button>
			</el-col>
			
		</el-row>
	
		<el-row>
			<el-col :span="24" style="margin-left: 1px;">
				<el-table :data="tableData.dataList" stripe border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50" fixed>
					</el-table-column>
					<el-table-column prop="sa" label="SA" width="220"></el-table-column>
					<el-table-column prop="vin" label="车架号" width="220"></el-table-column>
					<el-table-column prop="plateNum" label="车牌号" width="220"></el-table-column>
					<el-table-column prop="owner" label="车主" width="220"></el-table-column>
					<el-table-column prop="ownerPhone" label="联系电话" width="220"></el-table-column>
					<el-table-column label="抱怨类型" width="220" :formatter="typeCov"></el-table-column>
					<el-table-column prop="content" label="抱怨内容" width="220"></el-table-column>
					<el-table-column label="进度" width="220" :formatter="nodeCov"></el-table-column>
					<el-table-column prop="submitTime" label="提交时间" width="220"></el-table-column>
					<el-table-column label="状态" width="220" :formatter="statusCov"></el-table-column>

				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" @current-page="CurentPageMj" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total,prev, pager, next" :total="tableData.total"></el-pagination>

			</el-col>
		</el-row>
		
		<el-dialog title="类型调整" v-model="DialogShow" size="tiny">
			<el-row>
				<el-col :span="4">
				<p class="queryLabel">抱怨类型：</p>
				</el-col>
				<el-col :span="20" style="padding-left: 10px;">
					<el-select v-model="editData.questionType" placeholder="请选择" clearable>
				    <el-option
				      v-for="item in questionTypeList"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="4">
				<p class="queryLabel">抱怨程度：</p>
				</el-col>
				<el-col :span="20" style="padding-left: 10px;">
					<el-select v-model="editData.questionDegree" placeholder="请选择" clearable>
				    <el-option
				      v-for="item in questionDegreeList"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="1" style="float: right; margin-right: 40px;">
					<el-button size="small" type="primary" @click="typeEdit">提 交</el-button>
				</el-col>
			</el-row>
			
		</el-dialog>
		
		<el-dialog title="提交下一环节" v-model="DialogShow2" size="tiny">
			<el-form :model="approveData" :rules="rules" ref="approveData" label-width="100px" class="demo-ruleForm">
			
			<el-row>
				
				<el-col :span="20" style="padding-left: 10px;">
					 <el-form-item label="处理部门：" prop="pepole">
						
						<el-select v-model="approveData.pepole" placeholder="请选择" clearable v-if="isKF == 'true'" disabled>
						    <el-option
						      v-for="item in ApprovePepoes"
						      :label="item.label"
						      :value="item.value"
						      :disabled="item.disabled">
						    </el-option>
					  	</el-select>
					  	
					  	<el-select v-model="approveData.pepole" placeholder="请选择" clearable v-if="isKF == 'false'"  >
						    <el-option
						      v-for="item in ApprovePepoes"
						      :label="item.label"
						      :value="item.value"
						      :disabled="item.disabled">
						    </el-option>
					  	</el-select>
				  	
					 </el-form-item>
					
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="20" style="padding-left: 10px;">
				<el-form-item label="处理部门：" prop="remark">
				
					<el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="approveData.remark" style="width: 320px;">
					</el-input>
				</el-form-item>
				</el-col>
				
			</el-row>
			
		</el-form>
		
			<el-row>
				<el-col :span="1" style="float: right; margin-right: 40px;">
					<el-button size="small" type="primary" @click="submitNode('approveData')">提 交</el-button>
				</el-col>
			</el-row>
			
		</el-dialog>
		
		
		<el-dialog title="完成" v-model="DialogShow3" size="tiny">
			
			
			<el-row>
				<el-col :span="4">
				<p class="queryLabel">备注：</p>
				</el-col>
				<el-col :span="20" style="padding-left: 10px;">
					<el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="completeRemark" style="width: 320px;">
					</el-input>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="1" style="float: right; margin-right: 40px;">
					<el-button size="small" type="primary" @click="submitStatus">提 交</el-button>
				</el-col>
			</el-row>
			
		</el-dialog>
		
	</div>
</template>

<script>export default {
	data: function() {
		return {

			// 规则
			rules: {
				pepole: [{
						required: true,
						message: '请输入部门信息',
						trigger: 'blur'
					}

				]
				/*,
									remark: [{
											required: true,
											message: '请输入项名称',
											trigger: 'blur'
										}

									]*/
			},

			// 完成备注
			completeRemark: "",
			CurentPageMj: 1,
			page: this.page,
			currentRole: "",
			isKF: false,
			DialogShow: false,
			DialogShow2: false,
			DialogShow3: false,
			editData: {
				questionType: "",
				questionDegree: "",

			},
			//提交数据
			approveData: {
				pepole: "",
				remark: "",

			},
			queryData: { // 查询条件
				SA: "", // SA	
				questionDegree: "", // 问题程度
				questionType: "", // 问题类型
				progress: "", // 问题进度
			},
			queryDataEmpty: { // 置空
				SA: "", // SA	
				questionDegree: "", // 问题程度
				questionType: "", // 问题类型
				progress: "", // 问题进度
			},

			/*SAList:[], // SA下拉
			questionDegreeList:[], // 问题程度下拉
			questionTypeList:[], // 问题类型下拉
			progressList:[], // 问题进度下拉
			ApprovePepoes:[] // 处理人下拉*/

			/*测试*/
			SAList: [{
				label: "sa1",
				value: "sa1"
			}, {
				label: "sa2",
				value: "sa2"
			}], // SA下拉
			questionDegreeList: [{
				label: "抱怨",
				value: "0"
			}, {
				label: "投诉",
				value: "1"
			}, {
				label: "咨询",
				value: "2"
			}, {
				label: "建议",
				value: "3"
			}], // 问题程度下拉
			questionTypeList: [{
				label: "服务类",
				value: "1"
			}, {
				label: "价格类",
				value: "2"
			}, {
				label: "质量类",
				value: "3"
			}], // 抱怨类型下拉
			progressList: [{
				label: "客服",
				value: "0"
			}, {
				label: "客服经理",
				value: "1"
			}, {
				label: "服务经理",
				value: "2"
			}, {
				label: "钣金经理",
				value: "3"
			}, {
				label: "喷漆经理",
				value: "4"
			}, {
				label: "站长",
				value: "5"
			}], // 问题进度下拉
			ApprovePepoes: [{
				label: "服务经理",
				value: "2"
			}, {
				label: "钣金经理",
				value: "3"
			}, {
				label: "喷漆经理",
				value: "4"
			}, {
				label: "站长",
				value: "5",
				disabled: true
			}, {
				label: "客服经理",
				value: "1",
				disabled: true
			}],
			// 表格数据
			tableData: {
				total: 0,
				dataList: []
			},
			// 选择
			multipleSelection: [],
		}
	},
	methods: {

		// 查询
		query: function() {
			debugger;
			this.$http.post(this.API_ROOT + '/market/grievance/page', this.$data.queryData, {
				params: {
					//id:this.$data.multipleSelection[0].id,
					page:this.$data.CurentPageMj ,
					limit:this.$data.page.pageSize,
				}
			}).then(resp => {
				if(resp.data.success) {
					this.$data.tableData.total = Number(resp.data.total);
					this.$data.tableData.dataList = resp.data.dataList;
				} else {}
			}, resp => {});
		},
		//选择框
		handleSelectionChange: function(val) {
			debugger;
			this.$data.multipleSelection = val;
		},
		// 显示提交dialog
		submitNodeShow: function() {
			if(this.$data.multipleSelection.length != 1) {
				this.$message.error("请选择一条数据！");
				return;
			}
			if(this.$data.multipleSelection[0].status == "1") {
				this.$message.error("此任务已经完成，不可提交！");
				return;
			}

			var id = this.$data.multipleSelection[0].id;
			var nodes = this.$data.multipleSelection[0].node;
			debugger;

			this.$http.get(this.API_ROOT + '/market/grievance/isKF', {
				params: {
					id: id,
					node: nodes,
				}
			}).then(resp => {
				if(resp.data.success) {
					debugger;
					this.$data.isKF = resp.data.isKF.toString();
					this.$data.approveData.pepole = resp.data.data;
					this.$data.DialogShow2 = true;
				} else {
					this.$message.error(resp.data.msg);
				}

			}, resp => {});
			//this.$data.DialogShow2 = true;
		},
		// 提交
		submitNode: function(formName) {

			this.$refs[formName].validate((valid) => {
				if(valid) {

					debugger;
					var id = this.$data.multipleSelection[0].id;
					var nodes = this.$data.multipleSelection[0].node;
					var nextNode = this.$data.approveData.pepole
					var remark = this.$data.approveData.remark

					this.$http.get(this.API_ROOT + '/market/grievance/approve', {
						params: {
							id: id,
							nodes: nodes,
							nextNode: nextNode,
							remark: remark,
							//status:'6',
						}
					}).then(resp => {
						if(resp.data.success) {
							this.query();

						} else {
							this.$message.error(resp.data.msg);
						}
						this.$data.DialogShow2 = false;
					}, resp => {});

				} else {
					this.$message.error("表单填写不全！");
					return false;
				}
			});

		},
		// 类型调整显示dialog
		typeEditShow: function() {
			if(this.$data.multipleSelection.length != 1) {
				this.$message.error("请选择一条数据！");
				return;
			}
			if(this.$data.multipleSelection[0].status == "1") {
				this.$message.error("此任务已经完成，不可修改！");
				return;
			}
			this.$data.editData.questionType = "";
			this.$data.editData.questionDegree = "";

			this.$http.get(this.API_ROOT + '/market/grievance/info', {
				params: {
					id: this.$data.multipleSelection[0].id,
					//status:'6',
				}
			}).then(resp => {
				if(resp.data.success) {
					debugger;
					this.$data.editData.questionType = resp.data.data.type;
					this.$data.editData.questionDegree = resp.data.data.degree;

					this.$data.DialogShow = true;

				} else {
					this.$message.error(resp.data.msg);
				}

			}, resp => {});

		},
		// 类型调整提交
		typeEdit: function() {

			debugger;
			var id = this.$data.multipleSelection[0].id;
			var degree = this.$data.editData.questionDegree;
			var type = this.$data.editData.questionType;

			this.$http.get(this.API_ROOT + '/market/grievance/Degree', {
				params: {
					id: id,
					degree: degree,
					type: type,
					//status:'6',
				}
			}).then(resp => {
				if(resp.data.success) {
					this.query();

				} else {
					this.$message.error(resp.data.msg);
				}
				this.$data.DialogShow = false;
			}, resp => {});

		},
		// 完成显示dialog
		submitStatusShow: function() {
			if(this.$data.multipleSelection.length != 1) {
				this.$message.error("请选择一条数据！");
				return;
			}
			if(this.$data.multipleSelection[0].status == "1") {
				this.$message.error("此任务已经是完成任务了哦！^_^");
				return;
			}
			this.$data.completeRemark = "";
			this.$data.DialogShow3 = true;
		},
		// 完成
		submitStatus: function() {

			debugger;
			var id = this.$data.multipleSelection[0].id;
			var status = this.$data.multipleSelection[0].status;
			var remark = this.$data.completeRemark;
			this.$http.get(this.API_ROOT + '/market/grievance/complete', {
				params: {
					id: id,
					status: status,
					remark: remark,
					//status:'6',
				}
			}).then(resp => {
				if(resp.data.success) {
					debugger;
					this.$message(resp.data.msg);
					this.query();

				} else {
					debugger;
					this.$message.error(resp.data.msg);
				}
				this.$data.DialogShow3 = false;
			}, resp => {});

		},

		// 节点转换
		nodeCov: function(row) {
			switch(row.node) {
				case '0':
					return "客服待处理";
					break;
				case '1':
					return "客服经理待处理";
					break;

				case '2':
					return "SA服务经理待处理";
					break;

				case '3':
					return "SA钣金经理待处理";
					break;

				case '4':
					return "SA喷漆经理待处理";
					break;

				case '5':
					return "站长待处理";
					break;

				default:
					return "状态未知";
					break;

			}
		},
		statusCov: function(row) {
			switch(row.status) {
				case '0':
					return "未完成";
					break;
				case '1':
					return "已完成";
					break;
				default:
					return "状态未知";
					break;

			}
		}, // 服务类",value:"1"},{label:"价格类",value:"2"},{label:"质量类",value:"3"}
		typeCov: function(row) {
			switch(row.type) {
				case '1':
					return "服务类";
					break;
				case '2':
					return "价格类";
					break;

				case '3':
					return "质量类";
					break;

				default:
					return "未知类";
					break;

			}
		},
		// 获取当前角色
		getRole: function() {
			// 判断当前角色
			this.$http.get(this.API_ROOT + '/market/grievance/role', {
				params: {}
			}).then(resp => {
				if(resp.data.success) {
					debugger;
					this.$data.currentRole = resp.data.role;

				} else {
					this.$message.error(resp.data.msg);
				}

			}, resp => {});
		},
		//列表分页大小切换
		handleSizeChange: function() {},
		//列表当前页切换
		handleCurrentChange: function(currentPage) {

			debugger;
			this.$data.CurentPageMj = currentPage;
			this.query();
		},
	},
	created: function() {
		this.query();
		this.getRole();

	}
}</script>

<style>
</style>